<template>
  <div class="balance h-100%">
    <div class="acea-row">
      <div
        v-for="item in tabList"
        :key="item.type"
        class="item acea-row row-center-wrapper text-16px mr-50px text-#666"
        :class="{ on: where.type === item.type }"
        @click="handleChangeTab(item.type)"
      >
        {{ item.name }}
      </div>
    </div>

    <div v-if="where.type === 'userAccount'">
      <user-info ref="userInfoRef" @finished="btnloading = false"></user-info>
      <user-account></user-account>
      <el-button 
        class="w-120px h-54px text-16px handleBtn cursors ml-80px"
        type="success" 
        :loading="btnloading" 
        round 
        color="#E93323" 
        @click="submitForm"
        >
        保存
      </el-button>
    </div>
    <div v-if="where.type === 'addressList'">
      <address-list></address-list>
    </div>

  </div>
</template>

<script lang="ts" setup>
import userInfo from './components/userInfo.vue'
import userAccount from './components/userAccount.vue'
import addressList from './components/addressList.vue'

const where = reactive({
  type: 'userAccount',
})

const userInfoRef = ref()

const tabList = ref([
  {
    name: '修改密码',
    type: 'userAccount',
  },
  {
    name: '收货地址',
    type: 'addressList',
  }
])

const handleChangeTab = (type: string) => {
  where.type = type
}

const btnloading = ref<boolean>(false)

const submitForm = () => {
  btnloading.value = true
  userInfoRef.value.submitForm()
}

</script>

<style scoped lang="scss">
.balance {
  .item {
    position: relative;
    cursor: pointer;
    &.on {
      color: #e93323;
      &::before {
        content: '';
        position: absolute;
        top: 31px;
        bottom: 18px;
        height: 2px;
        width: 22px;
        background: #e93323;
      }
    }
  }
  &-item {
    margin-bottom: 20px;
    &:nth-last-child(1) {
      margin-bottom: 0;
    }
  }
}
</style>
